/****************
 *@description: 酒店收银台  新增并绑定宠物
 *@author: Xhd
 *@date: 2023-04-24 11:36:48
 *@version: V1.0.0
*************************************************************************/

import React, {Component} from "react";
import { Form, Input, Select, DatePicker, Space, Button, InputNumber, Row, Col } from "antd";
import moment from "moment";
import { apiSelectPetSpecies } from "@/request/hotel";

const { Option } = Select

class PetInfoAdd extends Component {
  constructor(props){
    super(props)
    this.bindPetFormRef = React.createRef()
    this.state = {
      loading:false,
      initialValues:{
        petName: "",
        petSpecies: "",
        petSpeciesId: "",
        petVarieties: "",
        petSex: "",
        birthday: "",
        weight: "",
        sterilizationStatus: "",
        vaccineStatus: "",
      },
      petVarietiesOpthion: [],
    }
  }

  componentDidMount(){
  }
  getSelectPetSpecies = (speciesSort) => {
    this.bindPetFormRef.setFieldsValue({
      petSpeciesId: ""
    })
    apiSelectPetSpecies({speciesSort}).then(res=> {
      if(res.code === 0) {
        let data = []
        let option = {}
        let petVarietiesOpthion = []
        for(let item in res.data) {
          data.push(res.data[item])
        } 
        for (const iterator of data.flat()) {
          option = {
            label: iterator.speciesName,
            value: iterator.petSpeciesId,
          }
          petVarietiesOpthion.push(option)
        }
        this.setState({
          petVarietiesOpthion
        })
      }
    })
  }
  petVarietiesChange = (value, option) => {
    this.setState({
      initialValues: {
        petVarieties: option.label
      }
    })
  }
  // 提交
  createBindPet = () => {
    this.setState({
      loading:true
    })
    let values = this.bindPetFormRef.getFieldsValue()
    values.birthday = moment(values.birthday).format('YYYY-MM-DD')
    values.petVarieties = this.state.initialValues.petVarieties
    this.props.bindPet(values)
  }
  // 点击取消
  onCancel = () => {
    this.props.cancel()
  }
  // 清空表单
  resetForm = () => {
    this.setState({
      loading:false
    })
    this.bindPetFormRef.setFieldsValue({
      petName: "",
      petSpecies: "",
      petSpeciesId: "",
      petVarieties: "",
      petSex: "",
      birthday: "",
      weight: "",
      sterilizationStatus: "",
      vaccineStatus: "",
    })
  }
  // 新增失败  loading 重置
  resetLoading = () => {
    this.setState({
      loading:false
    })
  }
  render(){
    const { loading, petVarietiesOpthion } = this.state
    return(
      <div>
        <Form ref={ref => this.bindPetFormRef = ref} onFinish={this.createBindPet} 
          wrapperCol={{span: 8, offset: 0}}
        >   
          <Form.Item label={"宠物信息"} name={'petName'} rules={[{required: true,}]} >
            <Input maxLength={8} />
          </Form.Item>
          <Form.Item label={"宠物科属"} name={'petSpecies'} rules={[{required: true,}]} >
            <Select onChange={this.getSelectPetSpecies}>
              <Option value='0' >狗狗</Option>
              <Option value='1' >猫咪</Option>
              <Option value='2' >异宠</Option>
            </Select>
          </Form.Item>
          <Form.Item label={"宠物品种"} name={'petSpeciesId'} rules={[{required: true,}]} >
            <Select onChange={this.petVarietiesChange} showSearch 
              options={petVarietiesOpthion} filterOption={(input, option) => (option?.label ?? '').includes(input)}
            >
            </Select>
          </Form.Item>
          <Form.Item label={"宠物性别"} name={'petSex'} rules={[{required: true,}]} >
            <Select>
              <Option value='1' >弟弟</Option>
              <Option value='2' >妹妹</Option>
            </Select>
          </Form.Item>
          <Form.Item label={"宠物生日"} name={'birthday'} rules={[{required: true,}]} >
            <DatePicker />
          </Form.Item>
          <Form.Item label={"宠物体重"} name={'weight'} rules={[{required: true,}]} extra={'单位：KG'} >
            <InputNumber />
          </Form.Item>
          <Form.Item label={"绝育信息"} name={'sterilizationStatus'} rules={[{required: true,}]} >
            <Select>
              <Option value='Y' >已绝育</Option>
              <Option value='N' >未绝育</Option>
            </Select>
          </Form.Item>
          <Form.Item label={"疫苗信息"} name={'vaccineStatus'} rules={[{required: true,}]} >
            <Select>
              <Option value='Y' >已打</Option>
              <Option value='N' >未打</Option>
            </Select>
          </Form.Item>
          <Row >
            <Col span={24} style={{ textAlign: 'right',}}>
              <Space>
                <Button type="defaulte" onClick={this.onCancel} >
                  取消
                </Button>
                <Button type="primary" htmlType="submit" loading={loading}>
                  确定
                </Button>
              </Space>
            </Col>
          </Row>
        </Form>
      </div>
    )
  }
}

export default PetInfoAdd